import React from 'react';
import { Link } from 'react-router-dom';
import Page from '../Page';

import styles from './index.module.less';

export default class GoodsRecord extends React.Component {
  state={
    picList: [
      { pic: require('../../../../../asset/images/high/you1.png'), title: ' A级外墙岩棉板厂家外墙皮、', city: '大连市1', price: 3100 },
      { pic: require('../../../../../asset/images/high/you2.png'), title: ' A级外墙岩棉板厂家外墙皮、', city: '大连市1', price: 3200 },
      { pic: require('../../../../../asset/images/high/you3.png'), title: ' A级外墙岩棉板厂家外墙皮、', city: '大连市1', price: 3300 },
      { pic: require('../../../../../asset/images/high/you4.png'), title: ' A级外墙岩棉板厂家外墙皮、', city: '大连市1', price: 3400 },
      { pic: require('../../../../../asset/images/high/you5.png'), title: ' A级外墙岩棉板厂家外墙皮、', city: '大连市1', price: 3500 },
      { pic: require('../../../../../asset/images/high/you6.png'), title: ' A级外墙岩棉板厂家外墙皮、', city: '大连市1', price: 3600 },
      { pic: require('../../../../../asset/images/high/you1.png'), title: ' A级外墙岩棉板厂家外墙皮、', city: '大连市1', price: 3100 },
      { pic: require('../../../../../asset/images/high/you2.png'), title: ' A级外墙岩棉板厂家外墙皮、', city: '大连市1', price: 3200 },
      { pic: require('../../../../../asset/images/high/you3.png'), title: ' A级外墙岩棉板厂家外墙皮、', city: '大连市1', price: 3300 },
      { pic: require('../../../../../asset/images/high/you4.png'), title: ' A级外墙岩棉板厂家外墙皮、', city: '大连市1', price: 3400 },
      { pic: require('../../../../../asset/images/high/you5.png'), title: ' A级外墙岩棉板厂家外墙皮、', city: '大连市1', price: 3500 },
      { pic: require('../../../../../asset/images/high/you6.png'), title: ' A级外墙岩棉板厂家外墙皮、', city: '大连市1', price: 3600 },
      { pic: require('../../../../../asset/images/high/you4.png'), title: ' A级外墙岩棉板厂家外墙皮、', city: '大连市1', price: 3400 },
      { pic: require('../../../../../asset/images/high/you5.png'), title: ' A级外墙岩棉板厂家外墙皮、', city: '大连市1', price: 3500 },
      { pic: require('../../../../../asset/images/high/you6.png'), title: ' A级外墙岩棉板厂家外墙皮、', city: '大连市1', price: 3600 },
    ],
  }
  render() {
    const { picList } = this.state;
    return (
      <div className={styles.GoodsRecordBox}>
        {/* 商品 */}
        {picList.map((item, index) => {
          return (
            <div key={index} className={styles.ImgBox + ' ' + styles.pullLeft}>
              <div className={styles.contentImgs} >
                <Link to="/"><img src={item.pic} alt=""/></Link>
                <Link className={styles.contentImgsText} to="/">
                  <div>库存:12.56吨</div>
                </Link>
              </div>
              <div className={styles.contentImgsTitle}>
                <Link to="/">{item.title}</Link>
              </div>
              <div className={styles.contentImgsTitle2}>
                <span className={styles.contentImgsAddress}>{item.city}</span>
                <span className={styles.contentImgsPrice}>{item.price}元/吨</span>
              </div>
            </div>
          );
        })}
        <div className={styles.clearfix}></div>
        <div className={styles.pageBox}>
          <Page/>
        </div>
      </div>
    );
  }
}
